// 编辑可视化图表
// 生成饼图图表
function pieChart(){
    let mychart = echarts.init(document.querySelector(".pie"))
    let option = {
        // 标题属性
        title:{
            text: "籍贯",
            textstyle: {
                color: '#6d767e',
            },
        },
        // 提示框
        tooltip: {
            formatter: "{a}<br> {b} <strong>{c}</strong>人 {d}%",
            // formatter: "{a}{b}{c}{d}"
        },
        series: [
          {
            name: '各地人员分布',
            type: 'pie',
            radius: ["10%", "60%"],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 4
            },
            data: [
              { value: 40, name: '河北省' },
              { value: 38, name: '北京市' },
              { value: 32, name: '天津市' },
              { value: 30, name: '黑龙江省' },
              { value: 28, name: '吉林省' },
              { value: 26, name: '辽宁省' },
              { value: 22, name: '山东省' },
              { value: 18, name: '河南省' }
            ]
          }
        ]
      };
    mychart.setOption(option)
}
pieChart()

// 生成折线图图表
function lineChart(){
    let myChart = echarts.init(document.querySelector(".line"))
    let option = {
        title:{
            text:'薪资',
        },
        legend:{},
        xAxis: {
            type: 'category',
            data: ['张三', '赵云', '貂蝉', '孙尚香', '嬴政', '李元芳', '王二小','小丽','小王','小云','小刘','小李','小芳']
          },
        yAxis: {
            type: 'value'
          },
        dataZoom: [{
            type : 'slider',
            end: 50,
        }],
        series: [
        {
            name: 'aaaa',
            data: [420, 602, 401, 934, 790, 430, 620,420, 602, 401, 934, 790, 330],
            type: 'line',
            smooth: true
        },
        {
            name: 'bbbb',
            data: [330, 790, 934, 401, 602, 420, 670, 460, 790, 934, 461, 602, 490],
            type: 'line',
            smooth: true
            }
        ]
    }     
    myChart.setOption(option)
}
lineChart()

// 生成柱状图
function barChart(){
    let myChart = echarts.init(document.querySelector('.barChart'))
    let option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            }
          },
          legend: {},
          xAxis: [
            {
              type: 'category',
              data: ['一组','二组','三组','四组','五组','六组','七组','八组'],
              axisPointer: {
                type: 'shadow'
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              min: 0,
              max: 100,
              interval: 10,//设置步长
              axisLabel: {
                formatter: '{value} 分'
              }
            },
            {
              type: 'value',
              min: 0,
              max: 10,
              interval: 1,
              axisLabel: {
                formatter: '{value} 人'
              }
            }
          ],
          series: [
            {
              name: '平均分',
              type: 'bar',
              barWidth:20,//柱子的宽度
              data: [
                83, 57, 90, 78, 66, 76, 77, 87, 69, 92, 88, 78
              ]
            },
            {
              name: '低于60分的人',
              type: 'bar',
              barWidth:20,//柱子的宽度
              yAxisIndex:1,
              data: [
                2, 1, 3, 4, 2, 5, 2, 2, 4, 1]
            },
            {
              name: '60-80分的人',
              type: 'bar',
              yAxisIndex: 1,
              barWidth:20,//柱子的宽度
              yAxisIndex:1,
              data: [3, 2, 1, 5, 1, 2, 3, 4, 5, 2]
            },
            {
                name: "80分以上的人数",
                type: "bar",
                yAxisIndex: 1, // 使用右侧的基准 因为它是人数 0 -10
                barWidth: 20, // 这是柱子的宽度
                data: [2, 3, 4, 7, 5, 6, 8, 6, 6, 4],
            },
          ]
    }
    myChart.setOption(option)
}
barChart()

// 地图
function mapChart() {
    let myChart = echarts.init($(".map")[0])
    var chinaGeoCoordMap = {
      黑龙江: [127.9688, 45.368],
      内蒙古: [110.3467, 41.4899],
      吉林: [125.8154, 44.2584],
      北京市: [116.4551, 40.2539],
      辽宁: [123.1238, 42.1216],
      河北: [114.4995, 38.1006],
      天津: [117.4219, 39.4189],
      山西: [112.3352, 37.9413],
      陕西: [109.1162, 34.2004],
      甘肃: [103.5901, 36.3043],
      宁夏: [106.3586, 38.1775],
      青海: [101.4038, 36.8207],
      新疆: [87.9236, 43.5883],
      西藏: [91.11, 29.97],
      四川: [103.9526, 30.7617],
      重庆: [108.384366, 30.439702],
      山东: [117.1582, 36.8701],
      河南: [113.4668, 34.6234],
      江苏: [118.8062, 31.9208],
      安徽: [117.29, 32.0581],
      湖北: [114.3896, 30.6628],
      浙江: [119.5313, 29.8773],
      福建: [119.4543, 25.9222],
      江西: [116.0046, 28.6633],
      湖南: [113.0823, 28.2568],
      贵州: [106.6992, 26.7682],
      云南: [102.9199, 25.4663],
      广东: [113.12244, 23.009505],
      广西: [108.479, 23.1152],
      海南: [110.3893, 19.8516],
      上海: [121.4648, 31.2891],
    }
    var chinaDatas = [
      [
        {
          name: "黑龙江",
          value: 0,
        },
      ],
      [
        {
          name: "内蒙古",
          value: 0,
        },
      ],
      [
        {
          name: "吉林",
          value: 0,
        },
      ],
      [
        {
          name: "辽宁",
          value: 0,
        },
      ],
      [
        {
          name: "河北",
          value: 0,
        },
      ],
      [
        {
          name: "天津",
          value: 0,
        },
      ],
      [
        {
          name: "山西",
          value: 0,
        },
      ],
      [
        {
          name: "陕西",
          value: 0,
        },
      ],
      [
        {
          name: "甘肃",
          value: 0,
        },
      ],
      [
        {
          name: "宁夏",
          value: 0,
        },
      ],
      [
        {
          name: "青海",
          value: 0,
        },
      ],
      [
        {
          name: "新疆",
          value: 0,
        },
      ],
      [
        {
          name: "西藏",
          value: 0,
        },
      ],
      [
        {
          name: "四川",
          value: 0,
        },
      ],
      [
        {
          name: "重庆",
          value: 0,
        },
      ],
      [
        {
          name: "山东",
          value: 0,
        },
      ],
      [
        {
          name: "河南",
          value: 0,
        },
      ],
      [
        {
          name: "江苏",
          value: 0,
        },
      ],
      [
        {
          name: "安徽",
          value: 0,
        },
      ],
      [
        {
          name: "湖北",
          value: 0,
        },
      ],
      [
        {
          name: "浙江",
          value: 0,
        },
      ],
      [
        {
          name: "福建",
          value: 0,
        },
      ],
      [
        {
          name: "江西",
          value: 0,
        },
      ],
      [
        {
          name: "湖南",
          value: 0,
        },
      ],
      [
        {
          name: "贵州",
          value: 0,
        },
      ],
      [
        {
          name: "广西",
          value: 0,
        },
      ],
      [
        {
          name: "海南",
          value: 0,
        },
      ],
      [
        {
          name: "北京市",
          value: 1,
        },
      ],
    ]
  
    var convertData = function (data) {
      var res = []
      for (var i = 0; i < data.length; i++) {
        var dataItem = data[i]
        var fromCoord = chinaGeoCoordMap[dataItem[0].name]
        var toCoord = [116.4551, 40.2539]
        if (fromCoord && toCoord) {
          res.push([
            {
              coord: fromCoord,
              value: dataItem[0].value,
            },
            {
              coord: toCoord,
            },
          ])
        }
      }
      return res
    }
    var series = []
    ;[["北京市", chinaDatas]].forEach(function (item, i) {
      // console.log(item)
      series.push(
        {
          type: "lines",
          zlevel: 2,
          effect: {
            show: true,
            period: 4, //箭头指向速度，值越小速度越快
            trailLength: 0, //特效尾迹长度[0,1]值越大，尾迹越长重
            // symbol: 'arrow', // 箭头图标
            // symbol: 'image://http://www.itcbc.com:3006/formdata/laoduan.jpg',
            // symbol: 'image://',
            symbol:
              "path://M644.427078 956.858834c-1.959631 0-3.929496-0.322341-5.829775-0.981351l-93.384877-32.326243c-9.302877-3.219321-14.233166-13.371542-11.012821-22.674419 3.219321-9.3039 13.372565-14.233166 22.674419-11.012821l69.729108 24.136723 0-27.361161-56.793494-51.671846c-4.507664-4.100388-6.607488-10.218736-5.568832-16.223496 1.481747-8.56405 2.202155-15.871479 2.202155-22.339798 0-0.37146 0.01228-0.74292 0.034792-1.113357l10.960633-175.081551c0.372483-5.954619 3.700275-11.328 8.863878-14.31503 5.166673-2.989077 11.482519-3.192715 16.82827-0.548492l311.807538 154.23271 0-64.716954L589.587076 410.05312c-3.866051-3.385097-6.083555-8.273431-6.083555-13.411451L583.503521 181.125197c0-22.372543-9.601682-51.562353-24.461111-74.362638-15.458063-23.719214-34.08326-37.323047-51.099818-37.323047-17.016559 0-35.642778 13.602809-51.099818 37.322024-14.859429 22.800285-24.460088 51.990095-24.460088 74.362638l0 215.515449c0 5.13802-2.217505 10.027377-6.083555 13.411451L100.941993 694.860724l0 64.501036 306.089303-153.963581c5.323239-2.677992 11.632945-2.517333 16.813944 0.425695 5.180999 2.943029 8.5487 8.280594 8.975419 14.223956l13.57825 189.452863c0.030699 0.423649 0.045025 0.849344 0.045025 1.274016 0 3.140527 0.372483 6.514367 0.76748 10.085706l0.146333 1.332345c0.618077 5.675256-1.51961 11.304464-5.749958 15.138792l-54.42761 49.327452 0 27.220968L443.965487 893.933689c16.090467-6.587022 51.374064-9.872858 73.997318 23.608697 5.511527 8.156774 3.367701 19.237133-4.790096 24.74866-8.156774 5.509481-19.237133 3.367701-24.74866-4.790096-5.106298-7.557116-11.355629-11.511171-19.105127-12.087293-6.149047-0.459464-11.268648 1.313925-12.056594 1.604544-0.410346 0.186242-0.512676 0.209778-0.997724 0.38067l-81.002872 28.452006c-5.453199 1.914606-11.496845 1.067308-16.213263-2.27481-4.715395-3.342118-7.518231-8.762571-7.518231-14.543228l0-60.274782c0-5.031597 2.12643-9.827833 5.854335-13.20679l53.638641-48.613184c-0.12382-1.769296-0.209778-3.598968-0.226151-5.482875l-11.624758-162.198126L91.127464 804.205085c-5.52483 2.7793-12.096503 2.494821-17.362436-0.750083s-8.471952-8.987698-8.471952-15.173584l0-101.504812c0-5.13802 2.217505-10.027377 6.084579-13.411451l325.355089-284.808628L396.732743 181.125197c0-29.250184 11.588943-65.203024 30.242791-93.826945 22.487154-34.504862 51.241035-53.507658 80.967056-53.507658 29.723975 0 58.477856 19.002796 80.966033 53.507658 18.654872 28.624944 30.244838 64.576761 30.244838 93.826945l0 207.430306 325.350996 284.808628c3.866051 3.385097 6.083555 8.273431 6.083555 13.411451l0 101.504812c0 6.163373-3.184529 11.890818-8.420787 15.142885-5.234211 3.252067-11.780301 3.567245-17.306154 0.833995L611.344612 649.180336l-9.253758 147.804301c-0.025583 5.622044-0.436952 11.579733-1.24741 18.022469l55.579853 50.567699c3.712555 3.377934 5.828752 8.16496 5.828752 13.184277l0 60.274782c0 5.76633-2.789533 11.175527-7.485485 14.519692C651.707902 955.73115 648.085398 956.858834 644.427078 956.858834z",
            symbolSize: 10, //图标大小
            color: "#ee6666", // 线上的箭头颜色
          },
          lineStyle: {
            normal: {
              width: 1, //尾迹线条宽度
              opacity: 1, //尾迹线条透明度
              curveness: 0.3, //尾迹线条曲直度
            },
          },
          data: convertData(item[1]),
        },
        {
          type: "effectScatter",
          coordinateSystem: "geo",
          zlevel: 2,
          rippleEffect: {
            //涟漪特效
            period: 4, //动画时间，值越小速度越快
            brushType: "stroke", //波纹绘制方式 stroke, fill
            scale: 4, //波纹圆环最大限制，值越大波纹越大
          },
          label: {
            normal: {
              show: true,
              position: "right", //显示位置
              offset: [5, 0], //偏移设置
              formatter: function (params) {
                //圆环显示文字
                return params.data.name
              },
              fontSize: 13,
            },
            emphasis: {
              show: true,
            },
          },
          symbol: "circle",
          symbolSize: function (val) {
            return 5 + val[2] * 5 //圆环大小
          },
          itemStyle: {
            normal: {
              show: false,
              color: "#f00",
            },
          },
          data: item[1].map(function (dataItem) {
            return {
              name: dataItem[0].name,
              value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value]),
            }
          }),
        },
        //被攻击点
        {
          type: "scatter",
          coordinateSystem: "geo",
          zlevel: 2,
          rippleEffect: {
            period: 4,
            brushType: "stroke",
            scale: 4,
          },
          label: {
            normal: {
              show: true,
              position: "right",
              //offset:[5, 0],
              color: "#0f0",
              formatter: "{b}",
              textStyle: {
                color: "#0f0",
              },
            },
            emphasis: {
              show: true,
              color: "#f60",
            },
          },
          symbol: "pin",
          symbolSize: 50,
          data: [
            {
              name: item[0],
              value: chinaGeoCoordMap[item[0]].concat([10]),
            },
          ],
        }
      )
    })
  
    let option = {
      backgroundColor: "#13297B",
  
      tooltip: {
        trigger: "item",
        backgroundColor: "rgba(166, 200, 76, 0.82)",
        borderColor: "#FFFFCC",
        showDelay: 0,
        hideDelay: 0,
        enterable: true,
        transitionDuration: 0,
        extraCssText: "z-index:100",
        formatter: function (params, ticket, callback) {
          //根据业务自己拓展要显示的内容
          var res = ""
          var name = params.name
          var value = params.value[params.seriesIndex + 1]
          res = "<span style='color:#fff;'>" + name + "</span><br/>数据：" + value
          return res
        },
      },
    //   backgroundColor: "#fff",
      title: {
        text: "来京路线 From",
        textStyle: {
          color: "#6d767e",
        },
      },
      // 视觉映射组件
      // visualMap: {
      //   // 图例值控制
      //   min: 0,
      //   max: 1,
      //   show: true, // 不让组件显示
      //   calculable: true,
      //   color: ["#f44336", "#fc9700", "#ffde00", "#ffde00", "#00eaff"],
      //   textStyle: {
      //     color: "#fff",
      //   },
      // },
      geo: {
        map: "china",
        zoom: 1.2,
        label: {
          emphasis: {
            show: false,
          },
        },
        roam: true, //是否允许缩放
        itemStyle: {
          normal: {
            color: "#dfe5f2", //地图背景色
            borderColor: "#516a89", // 省市边界线00fcff 516a89
            borderWidth: 1,
          },
          emphasis: {
            color: "rgba(37, 43, 61, .5)", // 悬浮背景
          },
        },
      },
      series: series,
    }
  
    myChart.setOption(option)
  }
  mapChart()